﻿
/*超大容器，一般出现在超大屏PC平台*/
@container (min-width : 1836px)
{
    /*属性渲染容器属性标签样式*/
    .bootstrapFormViewerPropertyLabel
    {
        white-space: nowrap;
    }
}

/*超大屏PC平台*/
@media all and (min-width : 2448px)
{
    /*表示媒体的元素样式样式*/
    .bootstrapMediaElement
    {
        --mediaContainerHeight: 28em;
    }
}

/*大容器，一般出现在普通屏PC平台*/
@container (min-width : 1224px) and (max-width : 1836px)
{
    /*属性渲染容器属性标签样式*/
    .bootstrapFormViewerPropertyLabel
    {
        white-space: nowrap;
    }
}

/*普通屏PC平台*/
@media all and (min-width : 1224px) and (max-width : 2448px)
{
    /*表示媒体的元素样式样式*/
    .bootstrapMediaElement
    {
        --mediaContainerHeight: 24em;
    }
}

/*中容器，一般出现在平板平台*/
@container (min-width : 667px) and (max-width : 1224px)
{
}

/*平板平台*/
@media all and (min-width : 667px) and (max-width : 1224px)
{
    /*表示媒体的元素样式样式*/
    .bootstrapMediaElement
    {
        --mediaContainerHeight: 22em;
    }
}

/*小容器，一般出现在手机平台*/
@container (max-width : 667px)
{
}

/*手机平台*/
@media all and (max-width : 667px)
{
    /*表示媒体的元素样式样式*/
    .bootstrapMediaElement
    {
        --mediaContainerHeight: 18em;
    }
}

:root
{
    /*强调文本的颜色*/
    --emphasizeColor: rgb(241, 65, 108);
}

pre
{
    margin: 0;
    font-size: unset;
}

p
{
    margin-bottom: 0;
}

/*高亮样式*/
mark
{
    padding: 0;
}

/*禁止label内部的button元素进行交互，使label可以正确触发input的事件，注意：
  在这种情况下，input标签必须放在button标签的前面
*/
label button
{
    pointer-events: none;
}

/*表单属性容器样式*/
.bootstrapSearchPanelPropertyContainer
{
}

/*表单视图容器的父容器样式*/
:has(> :is(.bootstrapFormViewerContainer,.bootstrapFormViewerTopContainer))
{
    container-type: inline-size;
}

/*表单视图容器样式*/
.bootstrapFormViewerContainer, .bootstrapFormViewerTopContainer
{
    display: flex;
    flex-direction: column;
    gap: var(--gapMedium);
}

/*表单视图容器的子容器样式*/
:is(.bootstrapFormViewerContainer, .bootstrapFormViewerTopContainer) > *
{
    flex-grow: 1;
}

/*属性渲染容器样式*/
.bootstrapFormViewerPropertyContainer
{
    display: flex;
    flex-direction: column;
    gap: var(--gapMedium);
}

    /*如果一个表单属性容器下面存在一个选择器或日期选择器组件，则它在容器中单独占一行*/
    .bootstrapFormViewerPropertyContainer:has( :where(.dropdown-toggle,.datetime-range))
    {
        width: 100%;
    }

/*属性渲染容器元素样式*/
.bootstrapFormViewerPropertyItem
{
    display: flex;
    flex-direction: column;
    gap: var(--gapMedium);
}

/*属性渲染容器属性标签样式*/
.bootstrapFormViewerPropertyLabel
{
}

/*属性渲染容器属性文字样式*/
.bootstrapFormViewerPropertyText
{
}

/*属性渲染容器元素说明样式*/
.bootstrapFormViewerPropertyDescription
{
    font-style: italic;
}

/*替换的弹窗提示框样式*/
.swal2-content
{
    white-space: pre-wrap;
}

/*替换的警告框样式*/
.alert
{
    margin-bottom: 0;
}

/*搜索面板容器样式*/
.bootstrapSearchPanelContainer
{
    display: flex;
    gap: var(--gapMedium);
    flex-wrap: nowrap;
}

/*搜索面板选择器样式*/
.bootstrapSearchPanelSelect
{
    display: grid;
    gap: var(--gapMedium);
    grid-template-columns: repeat(auto-fit,18ic);
    max-width: var(--popUpWidthMedium);
}

/*弹窗下页头或页脚样式*/
dialog :is(.card-header,.card-footer)
{
    position: sticky;
    z-index: 1;
    background-color: rgb(248,248,248);
}

/*弹窗下页头样式*/
dialog .card-header
{
    top: 0px;
}

/*弹窗下的页脚样式*/
dialog .card-footer
{
    bottom: 0px;
}

/*确认弹窗的样式，它避免该弹窗被其他弹窗遮盖*/
.modal.fade.swal.show
{
    z-index: 1056;
}

/*粘性定位样式*/
.sticky
{
    z-index: 1000;
}

/*文件渲染图片共享样式*/
.bootstrapSingleFileImage, .bootstrapFileViewerPreviewItemImage
{
    object-position: center;
    object-fit: cover;
    width: 100%;
}

/*文件视图渲染单个图片样式*/
.bootstrapSingleFileImage
{
    max-height: var(--mediaContainerHeight);
}

/*文件视图预览容器样式*/
.bootstrapFileViewerPreviewContainer
{
    max-width: var(--popUpWidthSmall);
}

/*文件视图预览项样式*/
.bootstrapFileViewerPreviewItem
{
}

/*文件视图预览项下面的图片样式*/
.bootstrapFileViewerPreviewItemImage
{
}

/*当存在打开的弹窗时，防止它被遮盖*/
.sticky:has(.modal.show)
{
    position: unset;
    z-index: unset;
}

/*卡片标头文字样式*/
.bootstrapCardHeaderText
{
}
